<template>
	<view class="confirm p-t-30 bg-page" :style="'min-height:'+$xyfun.xysys().windowHeight+'px'" v-if="!empty">

		<view class="express m-lr-30 br-10 bg-w">
			<view class="express p-lr-30 p-tb-40">
				<view class="flex" @tap="jump('/pages/user/address/list', { from: 'order' })">

					<view class="l" v-if="!address">请选择收货地址</view>
					<view v-else>
						<view class="tb m-b-10">
							<text>{{address.consignee}}</text>
							<text>{{address.phone}}</text>
						</view>
						<view class="tc-999">{{address.city + address.address}}</view>
					</view>
					<text :class="address?'m-l-auto xyicon icon-right m-t-30':'m-l-auto xyicon icon-right tc-999'"></text>
				</view>
			</view>
		</view>

		<view class="goods m-30 p-lr-30 br-10 bg-w">
			<view v-for="(g,index) in orderDetail.order_goods_list" :key="index" :class="'item bc-g p-tb-30 flex '+(index == orderDetail.order_goods_list.length-1?'':'bl-b')">
				<view class="l ovh br-10">
					<image :src="g.detail.current_sku_price.image ? g.detail.current_sku_price.image : g.detail.image" mode="widthFix" />
				</view>
				<view class="r psr m-l-20">
					<view class="tb lh-40 goods-title">
						{{g.detail.title}}
					</view>
					<view class="sku-text m-t-20" v-if="g.detail.current_sku_price && g.detail.current_sku_price.goods_sku_text">
						<text class="sku-text ts-24 lh-24 br-10 p-lr-25 bg-g">
						  {{g.detail.current_sku_price && g.detail.current_sku_price.goods_sku_text ? g.detail.current_sku_price.goods_sku_text : ""}}
						</text>
					</view>
					<view class="price-box flex psa lh-34">
						<text class="tc-r">￥</text>
						<text class="ts-34 tb tc-r">{{ g.detail.current_sku_price.price }}</text>
						<text class="m-l-auto">x{{ g.buy_num }}</text>
					</view>
				</view>
			</view>
		</view>


    <view class="m-30 p-30 br-10 bg-w">
      <view class="flex tb">
        <view>运费</view>
        <view class="m-l-auto">￥{{ orderDetail.delivery_amount|| "0.00" }}</view>
      </view>
    </view>

		<view class="m-30 p-30 br-10 bg-w">
			<view class="flex tb">
				<view>商品金额</view>
				<view class="m-l-auto">￥{{ orderDetail.goods_amount || "0.00" }}</view>
			</view>
		</view>


    <view class="m-30 p-30 br-10 bg-w">
      <view class="flex tb">
        <view>总计</view>
        <view class="m-l-auto">￥{{ orderDetail.total_fee || "0.00" }}</view>
      </view>
    </view>

		<view class="bottom-fixed flex tc bg-w">
			<view class="p-lr-30 p-tb-15 flex tc wa">
				<view class="flex lh-34 m-t-20">
					<text class="tc-999">共{{ orderDetail.total_num }}件</text>
				</view>


				<view class="action flex m-l-auto">
					<view class=" lh-42 p-t-15 ts-36 m-r-30 tc-r">¥<text class="tc-r">{{ orderDetail.total_fee || "0.00" }}</text></view>
					<view class="sub-order m-l-auto tc-w tm2b" @tap="goPay()">
						提交订单
					</view>
				</view>

			</view>
		</view>

    <payPop ref='payPop' @createOrder="createOrder"></payPop>

	</view>
</template>

<script>
	import { mapState } from 'vuex';
  import payPop from '@/components/paypop/index.vue';
  import Pay from '@/utils/pay';
	export default {
		components: {
      payPop
		},
		data() {
			return {

				disabled:false,
				empty:true,
				goodsList:[], //传递过来的参数
				from:"", //传递过来的参数
				orderType:"", //传递过来的参数
				orderDetail:[], //订单详情
				payModelShow:false,
				order:null,//支付订单
        address: ''
			}
		},
		computed: {
			...mapState(['common','user'])
		},
		async onLoad() {

			var query = this.$Route.query;
			this.goodsList = query.goodsList;


			this.from = query.from;
			this.orderType = query.orderType;



			this.loadData();
		},
		methods: {

			async loadData(){
				this.$api.post({
					url: '/goods_order/init',
					loadingTip:'加载中...',
					data: {
						goods_list:this.goodsList,
					},
					success: res => {
						this.empty = false;
						this.orderDetail = res;
            if(res.user_address){
              this.address = res.user_address;
            }
					},
					fail:res=>{
						setTimeout(()=>{
							uni.navigateBack();
						},2000)
					}
				});
			},

      sendAddr(e){
        this.address = e;
      },

			jump(path, parmas) {
			  this.$Router.push({
			    path: path,
			    query: parmas,
			  });
			},

      goPay() {
        if(this.user.isLogin){
          if(this.orderDetail.total_fee>0){
            this.$refs.payPop.showDiaLog(this.orderDetail.total_fee)
          }else{
            this.createOrder('free');
          }
        }else{
          this.$xyfun.toLogin();
        }
      },


      //创建订单
      createOrder(pay_type){
        var that = this;
        // 提交订单
        this.$api.post({
          url: '/goods_order/add',
          data: {
            goods_list: this.goodsList,
            from: this.from,
            order_type: this.orderType,
            address : this.address
          },
          loadingTip: '提交订单中...',
          success: res => {
            if(that.from=='cart'){
              //清空购物车cookie
              uni.setStorageSync("xykeep:cartList", []);
              uni.setStorageSync("xykeep:cartNum", 0);
            }
            //0元购
            if(res.status==1){
              that.$xyfun.to('/pages/user/shop/order?status=1');
              return;
            }
            //发起支付
            var pay = new Pay(pay_type, res, 'goods');
            pay.payMehod().then((res)=>{
              that.disabled = false;
              that.$refs.payPop.disabled = false;
              pay.payResult(res);
            },(res)=>{
              that.$refs.payPop.disabled = false;
              if(pay_type != 'balance'){
                pay.payResult(res);
              }
            });
          },fail: res=>{
            that.$refs.payPop.disabled = false;
          }
        });
      },


		}
	}
</script>

<style scoped lang="scss">
	.line{height: 4rpx;width: 34%;margin: 0 auto;}

	.goods{
		.item{
			.l{
				width: 178rpx;height: 178rpx;
				image{width: 178rpx;}
			}
			.r{
				width: 432rpx;
				.price-box{bottom: 3rpx;width: 100%;}
			}
		}
		.goods-title{max-height: 80rpx;overflow: hidden;}
	}
	.bottom-fixed{
		.sub-order{width: 260rpx;height: 74rpx;border-radius: 37rpx;line-height: 74rpx;}
	}

	.pay-model-box{width: 80%;}
</style>
